<template>
  <el-dialog
    class="batch-download-report-dialog"
    title="批量下载检测报告"
    width="400px"
    :visible.sync="dialogVisible"
    :close-on-click-modal="true"
    v-dialogDrag="true"
    append-to-body
    @open="handleDialogOpen"
    @closed="handleDialogClosed"
  >
    <el-form
      ref="exportSealUseRecordFormRef"
      :model="formData"
      :rules="formRules"
      size="small"
      label-width="100px"
    >
      <el-form-item label=" " prop="detectionDate" label-width="0px">
        <el-date-picker
          style="width: 100%"
          v-model="formData.detectionDate"
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          :unlink-panels="true"
        ></el-date-picker>
      </el-form-item>
    </el-form>

    <div class="dialog-footer" slot="footer">
      <el-button type="primary" :loading="btnLoading" @click="handleConfirm"
        >确 定</el-button
      >
      <el-button @click="dialogVisible = false">关 闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { listByIds } from "@/api/system/oss";
import { taskAllReportOssIdByDate } from "@/api/testItem/detectionResult";

export default {
  name: "BatchDownloadReportDialog",
  components: {},
  dicts: [],
  props: {
    show: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      userList: [],
      formData: {},
      formRules: {},
      btnLoading: false,
    };
  },
  computed: {
    dialogVisible: {
      get() {
        return this.show;
      },
      set(value) {
        this.$emit("update:show", value);
      },
    },
  },
  created() {
    this.initFormData();
  },
  methods: {
    // 弹框打开时
    handleDialogOpen() {},
    // 弹框关闭时
    handleDialogClosed() {
      this.initFormData();
      this.$refs.exportSealUseRecordFormRef.resetFields();
    },
    // 初始化表单数据
    initFormData() {
      this.formData = {
        detectionDate: [],
      };
    },
    // 获取表单数据
    getFormData() {
      const data = JSON.parse(JSON.stringify(this.formData));
      data.startSignDate = data.detectionDate ? data.detectionDate[0] : "";
      data.endSignDate = data.detectionDate ? data.detectionDate[1] : "";
      delete data.detectionDate;
      return data;
    },
    // 点击确定
    handleConfirm() {
      this.$refs.exportSealUseRecordFormRef.validate((valid) => {
        if (!valid) return;
        const data = this.getFormData();
        console.log("表单数据", data);
        this.btnLoading = true;
        taskAllReportOssIdByDate(data)
          .then((res) => {
            const ossIds = res.data || [];
            if (res.data.length <= 0) {
              this.$message.error("没有可下载的报告");
              this.btnLoading = false;
              return;
            }
            listByIds(ossIds)
              .then((res2) => {
                this.btnLoading = false;
                if (!res2 || res2.data.length <= 0) {
                  this.$message.error("没有可下载的报告");
                  return;
                }
                res2.data.forEach((item) => {
                  fetch(item.url)
                    .then((response) => response.blob())
                    .then((blob) => {
                      const url = window.URL.createObjectURL(blob);
                      const link = document.createElement("a");
                      link.href = url;
                      link.download = item.originalName;
                      document.body.appendChild(link);
                      link.click();
                      window.URL.revokeObjectURL(url);
                      link.remove();
                    });
                });
              })
              .catch((err) => {
                this.btnLoading = false;
              });
          })
          .catch((err) => {
            this.btnLoading = false;
          });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.batch-download-report-dialog {
  ::v-deep .el-dialog__body {
    max-height: 70vh;
    overflow-y: auto;
  }

  ::v-deep .transfer {
    width: 100%;

    .el-transfer-panel {
      width: calc(calc(100% - 182px) / 2);
    }

    .el-transfer-panel__body {
      height: calc(70vh - 40px - 100px - 15px);
    }

    .el-transfer-panel__list {
      height: calc(100% - 32px - 15px);
    }
  }
}
</style>
